<template>
  <view>
    <view class="n-box"></view>
    <view class="footer">
      <view class="bar" @tap="callPhone">
        <view class="barBox">
          <image src="../../icon/电话.png"></image>
          <text>电话咨询</text>
        </view>
      </view>
      <view class="bar" @tap="JumpFillIn">
        <view class="barBox">
          <image src="../../icon/个人.png"></image>
          <text>在线咨询</text>
        </view>
      </view>
      <view class="bar" @tap="visit">
        <view class="barBox">
          <image src="../../icon/预约.png"></image>
          <text>预约参观</text>
        </view>
      </view>
      <view :catchtouchmove="preventTouchMove">
        <view class="mask" @tap="cos" v-if="show2"></view>
        <view class="up-window" v-if="show2">
          <view class="win-title">
            <view class="win-title-text">预约参观</view>
          </view>
          <view class="window-c">
            <view class="c-title">您的预约信息：</view>
            <textarea class="textarea" id="" cols="30" rows="10"></textarea>
            <view class="c-title">请留下您的联系方式，方便随时和您联系：</view>
            <input class="input" type="text" placeholder="姓名" />
            <input class="input" type="text" placeholder="电话号码" />
            <picker
              class="select"
              @change="picker($event)"
              mode="selector"
              :value="arrayIndex"
              :range="arrayList"
              range-key="value"
            >
              <view class="picker">{{
                arrayItem.value ? arrayItem.value : "意向年级"
              }}</view>
              <!-- 或者 -->
              <!-- <view class="picker">{{arrayList[arrayIndex].value}}</view> -->
            </picker>
            <button type="submit" class="visit">预约参观</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  props: "",
  data() {
    return {
      arrayIndex: 0,
      mobile: "",
      show: false,
      show2: false,
      arrayList: [
        {
          key: 0,
          value: "幼儿园",
        },
        {
          key: 1,
          value: "一年级",
        },
        {
          key: 2,
          value: "二年级",
        },
        {
          key: 3,
          value: "三年级",
        },
        {
          key: 4,
          value: "四年级",
        },
        {
          key: 5,
          value: "五年级",
        },
        {
          key: 6,
          value: "六年级",
        },
        {
          key: 7,
          value: "七年级",
        },
        {
          key: 8,
          value: "八年级",
        },
        {
          key: 9,
          value: "九年级",
        },
        {
          key: 10,
          value: "十年级",
        },
      ],
      arrayItem: {},
    };
  },
  methods: {
    JumpFillIn() {
      Taro.navigateTo({
        url: "/pages/Information/index",
      });
    },
    cos: function () {
      this.show2 = false;
    },
    visit: function () {
      this.show2 = true;
    },
    picker(e) {
      this.arrayItem = this.arrayList[e.target.value];
      // 或者
      // this.arrayIndex = e.target.value;
    },
    preventTouchMove: function closeBodyScroll() {
      window.lockMaskScrollTop =
        document.scrollingElement.scrollTop || document.body.scrollTop;
      document.body.classList.add("popup-open");
      document.body.style.top = -window.lockMaskScrollTop + "px";
    },
    preventTouchMove: function openBodyScroll() {
      if (document.body.classList.contains("popup-open")) {
        document.body.classList.remove("popup-open");
        document.scrollingElement.scrollTop = window.lockMaskScrollTop;
      }
    },
    callPhone(e) {
      let mobile = "13261917725";
      // let mobile = e.currentTarget.dataset.phone;
      Taro.showActionSheet({
        itemList: ["呼叫", "添加联系人", "复制"],
        success: function (res) {
          if (res.tapIndex === 0) {
            // 呼叫号码
            Taro.makePhoneCall({
              phoneNumber: mobile + "",
            }).catch((e) => {
              // console.log(e);  //抛出错误
            });
          } else if (res.tapIndex == 1) {
            // 添加到手机通讯录
            Taro.addPhoneContact({
              firstName: "张三", //联系人姓名
              mobilePhoneNumber: mobile + "", //联系人手机号
            });
          } else if (res.tapIndex == 2) {
            Taro.setClipboardData({
              data: mobile + "",
              success() {
                Taro.getClipboardData({
                  success(resx) {
                    Taro.showToast({
                      title: "复制成功",
                      icon: "none",
                    });
                    console.log(resx);
                  },
                });
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style>
.footer {
  width: 100%;
  height: 80px;
  display: flex;
  position: fixed;
  align-items: center;
  bottom: 0;
  z-index: 3;
  background-color: #0b6db6;
}
.bar {
  font-size: 30px;
  width: 33.4%;
  height: 100%;
  color: white;
}
.barBox {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-right: 1px solid white;
}
.bar image {
  width: 40px;
  height: 40px;
  /* background-color: coral; */
  vertical-align: middle;
}
/* 弹窗 */
.desk {
  width: 90%;
  height: 80%;
  background-color: white;
  position: fixed;
  z-index: 2;
  top: 10%;
  left: 5%;
}
/* 遮罩层 */
.b1 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.up-window {
  width: 94%;
  position: fixed;
  background-color: white;
  z-index: 2;
  top: 2%;
  left: 3%;
}
.win-title {
  width: 100%;
  height: 80px;
  display: flex;
  background-color: #0b6db6;
  align-items: center;
}
.win-title-text {
  margin-left: 20px;
  color: white;
}
.window-c {
  width: 100%;
  height: 90%;
  /* background-color: white; */
}
.c-title {
  padding-top: 20px;
  font-size: 20px;
  padding-left: 20px;
}
.textarea {
  width: 94%;
  height: 200px;
  margin-top: 10px;
  margin-left: 20px;
  color: #ccc;
  /* background-color: salmon; */
  border-radius: 10px;
  border: 1px solid #ccc;
}
.input {
  width: 91%;
  height: 80px;
  padding-left: 20px;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.select {
  width: 94%;
  height: 70px;
  margin-top: 20px;
  margin-left: 20px;
  /* background-color: aquamarine; */
  border-radius: 10px;
  border: 1px solid #ccc;
}
.visit {
  font-size: 30px;
  color: white;
  width: 94%;
  height: 80px;
  margin-top: 20px;
  margin-left: 20px;
  background-color: #0b6db6;
  border-radius: 5px;
  margin-bottom: 30px;
}
.picker {
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}
.n-box {
  height: 80px;
}
</style>
